<template>
  <el-card class="box-card">
    <!-- 头部 start -->
    <template #header>
      <div class="card-header">
        <h3><el-icon style="margin-right: 10px"><Stamp/></el-icon>菜单管理</h3>

        <!-- 搜索区域 start  -->
        <div class="card-search">
          <el-row :gutter="10">

            <el-col :span="11">
              <el-input prefix-icon="Search" v-model="searchValue" @keyup.enter.native="search" placeholder="关键字搜索(回车)"/>
            </el-col>

            <el-col :span="9">
               <div class="my-button">
                 <el-button plain style="width: 100%" color="#e99d53" @click="addMenu">
                   <el-icon><Plus/></el-icon>
                   添加顶级菜单
                 </el-button>
               </div>
            </el-col>
            <el-col :span="4" style="display: inline-flex;justify-content: center;align-items: center;cursor: pointer">
              <el-icon style="font-size: 20px" color="#b3b6bc" @click="refresh"><Refresh/></el-icon>
            </el-col>
          </el-row>
        </div>
        <!-- 搜索区域 end  -->

      </div>
    </template>
    <!-- 头部 end -->

    <!-- 表格区域 start -->
    <div class="table-box">
      <el-table row-key="id" :tree-props="{ children:'sub_menus' }"  element-loading-text="加载中..." v-loading="loading" :data="tableData"
      style="width: 100%;text-align: center;" :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ fontSize: '15px',background: '#e99d53',color: 'white',textAlign: 'center' }">
        <el-table-column label="序号" width="100" type="index"></el-table-column>

        <el-table-column label="菜单名称">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="菜单图标" >
          <template #default="scope">
            <span>
              <el-icon>
                <component style="font-size: 24px;" :is="scope.row.web_icon"></component>
              </el-icon>
            </span>
          </template>
        </el-table-column>

        <el-table-column label="菜单排序" >
          <template #default="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>

        <el-table-column label="菜单类型" >
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.level === 0">目录</el-tag>
            <el-tag type="info" v-else-if="scope.row.level === 1">菜单</el-tag>
            <el-tag v-else>按钮</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="路由路径" prop="path"/>
        <el-table-column label="组件路径" prop="component_name"/>

        <el-table-column label="操作" width="260">
          <template #default="scope">
            <el-button v-if="scope.row.level != 2" color="#e99d53" style="color: white" size="small"
                       @click="addSubMenu(scope.row.id,scope.row.level,scope.row.name)" type="primary">新增子级</el-button>
            <el-button size="small" @click="editMenu(scope.row.id)">
              <el-icon><Edit/></el-icon>
              编辑
            </el-button>

            <el-popconfirm width="200px" confirm-button-text="确定" cancel-button-text="取消" icon="Delete" icon-color="#636AEF"
            :title="'确定要删除菜单名为' + scope.row.name + '的菜单吗?'" @confirm="delMenu(scope.row.id)">
              <template #reference>
                <el-button size="small" type="danger">
                  <el-icon><Delete/></el-icon>
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>

    </div>
    <!-- 表格区域 end -->

    <!-- 新增管理员弹出框 start -->
    <el-dialog v-model="addMenuVisible" align-center width="60%" destroy-on-close>
      <template #header>
        <div class="my-header">
          <el-icon size="26px"><EditPen/></el-icon>
          <h1>{{ addTitle }}</h1>
        </div>
      </template>
      <AddMenu :parentId="parentId" :level="level" @closeForm="closeForm" @success="success"/>
    </el-dialog>
    <!-- 新增管理员弹出框 end -->

    <!-- 编辑弹出框 start -->
    <el-dialog v-model="editMenuVisible" align-center width="60%" destroy-on-close>
      <template #header>
        <div class="my-header">
          <el-icon size="26px"><EditPen/></el-icon>
          <h1>编辑菜单</h1>
        </div>
      </template>
      <EditMenu :menuInfo="menuInfo" @closeForm="closeForm" @success="success"/>
    </el-dialog>
    <!--     编辑弹出框 end-->
  </el-card>
</template>

<script setup lang="ts">
import {ref, reactive, toRefs, onMounted} from "vue";
import { ElMessage } from "element-plus";
import {getMenuListApi} from "@/api/system/menu/menu.ts";
import AddMenu from "./components/AddMenu.vue";
import EditMenu from "./components/EditMenu.vue";
import {delMenuApi, getMenuApi} from "../../../api/system/menu/menu.ts";

const addTitle = ref('添加顶层菜单');
// 新增弹出框状态
const addMenuVisible = ref(false);
// 编辑弹出框状态
const editMenuVisible = ref(false);

const state = reactive({
  // 搜索关键词
  searchValue: '',
  // 表格数据
  tableData: [],
  // 数据加载
  loading: false
})

// 获取数据列表
const loadData = async (state: any) => {
  state.loading = true;
  // 先清空表格数据
  state.tableData = [];
  const params = {
    'keyword': state.searchValue
  }
  console.log('params:',params);
  const { data } = await getMenuListApi(params);
  state.tableData = data.result;
  state.loading = false;
};

// 刷新
const refresh = () => {
  // 搜索关键字
  state.searchValue = '';
  // 加载数据
  loadData(state);
};

// 搜索
const search = () => {
  if (state.searchValue !== null && state.searchValue !== '') {
    loadData(state);
    ElMessage({
      type: 'success',
      message: `关键字${state.searchValue}搜索的内容如下`
    })
  }
}



// 管理员信息
const menuInfo = ref();
// 获取信息
const editMenu = async (id: number) => {
  const { data } = await getMenuApi(id);
  menuInfo.value = data.result;
  editMenuVisible.value = true;
}


// 弹出新增表单的函数
const addMenu = () => {
  addMenuVisible.value = true;
}

// 关闭新增管理员弹出框
const closeForm = () => {
  addMenuVisible.value = false;
  editMenuVisible.value = false;
}

const success = () => {
  closeForm()
  loadData(state);
}



// 删除
const delMenu = async (id: number) => {
  const { data } = await delMenuApi(id);
  if (data.code === 200) {
    ElMessage.success("删除成功")
    await loadData(state);
  } else {
    ElMessage.error("删除失败")
  }
}

// 定义需要导出的列名对象
const column = [
  { name: 'id',label: '用户ID'  },
  { name: 'username',label: '用户名称'  },
  { name: 'phone',label: '手机号'  },
  { name: 'email',label: '邮箱'  },
  { name: 'remarks',label: '备注'  }
];

// 导出Excel函数
const exportExcelAction = () => {
  exportExcel({
    column,
    data: state.tableData,
    filename:  "管理员信息数据",
    autoWidth: true,
    format: 'xlsx',
  })
}

// 新增子菜单
const parentId = ref();
const level = ref();
const addSubMenu = (id: number,vLevel: number,name: string) => {
  addMenuVisible.value = true;
  // 父节点ID
  parentId.value = id;
  level.value = vLevel;

  const menuName = ref('子菜单');
  if (vLevel == 1) {
    menuName.value = '按钮';
  }
  addTitle.value = `正在给"${name}"新增${menuName.value}`;
}


// 挂载之后加载数据列表
onMounted(() => {
  loadData(state);
})
const { tableData,loading,searchValue } = toRefs(state);

</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e99d53;
}

.card-header h3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.el-card {
  border-radius: 0;
  border: none;
}

/* 自定义按钮样式 */
.my-button {
  display: flex;
  justify-content: space-between;
}


/* 自定义分页样式 */
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #e99d53;
}

/*  自定义弹出框样式 */
.my-header {
  display: flex;
  justify-content: flex-start;
  color: #e99d53;
}

</style>